<mat-card [class]="['card', size()]">
  <mat-card-content class="card-content">
    <div [class]="['container', size()]">
      <div class="content-left fn-theme-contrast-lighter">
        <div class="product-logo-container">
          <ix-icon [name]="isIxHardware() ? iconMarker('ix-truenas-logo') : iconMarker('ix-truenas-logo-type')" [fullSize]="true"></ix-icon>
        </div>

        <ix-product-image
          class="passive product-image"
          [systemProduct]="systemInfo()?.platform"
          [hasEnclosureSupport]="!!hasEnclosureSupport()"
          [isHaLicensed]="!!isHaLicensed()"
          [isEnterprise]="!!isEnterprise()"
          [isIxHardware]="!!isIxHardware()"
        >
          <span>{{ 'Standby' | translate }}</span>
        </ix-product-image>

        @if (systemInfo()?.system_serial && isIxHardware()) {
          <div class="hostname">
            @if (isLoaded()) {
              <span [matTooltip]="'Hostname: {hostname}' | translate: { hostname: systemInfo()?.hostname }">
                {{ systemInfo()?.hostname }}
              </span>
            }
          </div>
        }

        <div class="card-action-container">
          @if (isUpdateRunning()) {
            <button
              mat-button
              color="primary"
              [ixTest]="['widget-sysinfo', 'update-running']"
              [disabled]="true"
            >{{ 'Update in Progress' | translate }}</button>
          }

          @if (isHaLicensed() && !isUpdateRunning()) {
            <button
              *ixRequiresRoles="requiredRoles"
              mat-button
              matTooltipPosition="above"
              color="primary"
              class="simple-failover-btn"
              ixTest="initiate-failover"
              [matTooltip]="'HA is Disabled' | translate"
              [matTooltipDisabled]="isHaEnabled()"
              [disabled]="!canFailover()"
              (click)="openDialog()"
            >
              @if (!isHaEnabled()) {
                <ix-icon name="mdi-alert"></ix-icon>
              }
              {{ 'Initiate Failover' | translate }}
            </button>
          }
        </div>
      </div>

      <div class="content-right">
        <div class="header">
          <h3>{{ 'System Information' | translate }} <small>{{ 'standby' | translate }}</small></h3>
        </div>

        <mat-list>
          <mat-list-item>
            <strong>{{ 'Platform' | translate }}:</strong>
            @if (isLoaded()) {
              <span>
                @if (systemInfo()?.platform && isIxHardware()) {
                  {{ systemInfo().platform }}
                } @else {
                  {{ 'Generic' }}
                }
              </span>
            } @else {
              <ng-container *ngTemplateOutlet="skeletonLoader"></ng-container>
            }
          </mat-list-item>

          <mat-list-item>
            <strong>{{ 'Edition' | translate }}:</strong>
            @if (isLoaded()) {
              <span>
                @if (isEnterprise()) {
                  {{ 'Enterprise' | translate }}
                } @else {
                  {{ 'Community' | translate }}
                }
              </span>
            } @else {
              <ng-container *ngTemplateOutlet="skeletonLoader"></ng-container>
            }
          </mat-list-item>

          <mat-list-item>
            <strong>{{ 'Version' | translate }}:</strong>
            @if (isLoaded()) {
              <div class="copy-version">
                <div class="copy-version-text" [matTooltip]="version()">
                  <span>
                    {{ version() }}
                  </span>
                </div>
                <ix-copy-button [text]="version()"></ix-copy-button>
              </div>
            } @else {
              <ng-container *ngTemplateOutlet="skeletonLoader"></ng-container>
            }
          </mat-list-item>

          @if (systemInfo()?.license) {
            <mat-list-item>
              <div class="license-info">
                <div class="title">{{ 'Support License' | translate }}:</div>
                <div class="info">
                  <div>
                    {{
                      '{license} Contract,' | translate:
                      {
                        license: getLabelForContractType(systemInfo().license.contract_type),
                      }
                    }}
                  </div>
                  <div>
                    {{
                      'Expires on {date}' | translate: { date: systemInfo().license.contract_end.$value }
                    }}
                  </div>
                </div>
              </div>
            </mat-list-item>
          }

          @if (systemInfo()?.system_serial && isIxHardware()) {
            <mat-list-item>
              <strong>{{ 'System Serial' | translate }}:</strong>
              <span>
                {{ systemInfo().system_serial }}
              </span>
            </mat-list-item>
          } @else {
            <mat-list-item>
              <strong>{{ 'Hostname' | translate }}:</strong>
              @if (isLoaded()) {
                <span>
                  {{ systemInfo()?.hostname }}
                </span>
              } @else {
                <ng-container *ngTemplateOutlet="skeletonLoader"></ng-container>
              }
            </mat-list-item>
          }

          <mat-list-item>
            <strong>{{ 'Uptime' | translate }}:</strong>
            @if (isLoaded()) {
              <span>
                {{ uptime() | uptime: datetime() }}
              </span>
            } @else {
              <ng-container *ngTemplateOutlet="skeletonLoader"></ng-container>
            }
          </mat-list-item>
        </mat-list>
     </div>
    </div>

    @if (!isHaLicensed()) {
      <div [class]="['empty', 'container', size()]">
        <ix-icon class="icon" name="mdi-widgets"></ix-icon>
        <h3>
          <div>{{ 'This system is not licensed for HA.' | translate }}</div>
          <small>{{ 'Configure dashboard to edit this widget.' | translate }}</small>
        </h3>
      </div>
    }

    @if (isWaitingForEnabledHa()) {
      <div [class]="['empty', 'container', size()]">
        <ix-icon class="icon" name="mdi-timer-cog-outline"></ix-icon>
        <h3>{{ 'Waiting for standby controller' | translate }}</h3>
      </div>
    }
  </mat-card-content>
</mat-card>

<ng-template #skeletonLoader>
  <ngx-skeleton-loader
    class="inline-loader"
    [theme]="{
      height: '20px',
      background: 'var(--alt-bg2)',
      opacity: 0.25,
      margin: 0,
    }"
  ></ngx-skeleton-loader>
</ng-template>
